<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Log页面</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
    <link rel="icon" href="favicon.ico">
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap-theme.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="../node_modules/jquery/dist/jquery.js"></script>
    <script src="../node_modules/socket.io-client/dist/socket.io.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
</head>
<body>
<div class="col-md-12">
    <label for="txt">Log信息</label>
    <br>
    <textarea id="txt" class="col-md-12" style="width: 100%;height: 500px"></textarea>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        var socket = io();
        var text_area = $("#txt");
        socket.on('record', function (data) {
            if (!data.message)
                return;
            var txt = text_area.text();
            text_area.text(data.message+"\n"+txt);
            console.log(data.message);
        });
        socket.on('barrier', function (data) {
            if (!data.message)
                return;
            var txt = text_area.text();
            text_area.text(data.message+"\n"+txt);
            console.log(data.message);
        });
        socket.on('ucl', function (data) {
            if (!data.message)
                return;
            var txt = text_area.text();
            text_area.text(data.message+"\n"+txt);
            console.log(data.message);
        });
    });
</script>

</body>
</html>